<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to DNAxCAT Rocky's website!</title>
    <!--Bootstrap-->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <!--CSS file specially for current page-->
    <link rel="stylesheet" href="style/index.css">
    <!--Material Symbols-->
    <link rel="stylesheet" href="node_modules/material-symbols/index.css">
    <!--Fontawesome-->
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <!--Universal skin CSS file-->
    <link rel="stylesheet" href="style/main.css">
    <!--Website logo to be shown before title-->
    <link rel="shortcut icon" href="icon/hoshi.svg" type="image/x-icon">
</head>

<body>
    <!--Loading screen, will disappear once every script is loaded.-->
    <div id="load">
        <div class="load_hoshi">
            <img src="icon/hoshi_w.svg" alt="">
        </div>
    </div>
    <!--A navbar is still necessary, handled by JQuery things-->
    <div id="rocky_nav" role="navigation">
    </div>
    <div class="gap"></div>
    <div class="main"><!--As large as Windows size-->
        <!--The main part of the welcome page is a flexbox with 2 boxes-->
        <div class=" position-absolute top-0 badge bg-danger mt-2">
            <span>This is a work in progress project and is not representative to the formal version.</span>
        </div>
        <div class="welcome">
            <div class="d-flex flex-column align-items-center mt-4 mt-md-0"><!--Featuring DNAxCAT Rocky and the logo-->
                <!--Artwork by chiyu-->
                <img src="img/rocky_welcome.png" alt="" class="welcome_pic">
                <img src="img/rocky_logo.png" alt="" class="welcome_logo">
            </div>
            <div class="ms-md-5"><!--Featuring all main parts of the page-->
                <div class="welcome_links">
                    <div>
                        <div class="w_link">
                            <h1>Welcome to my website!</h1>
                        </div>
                    </div>
                    <a href="about.html">
                        <div class="w_link_logo">
                            <i class="fas fa-paw"></i>
                        </div>
                        <div class="w_link">
                            <h3>
                                About me
                            </h3>
                            <h5>Know more about me!</h5>
                        </div>
                    </a>
                    <a href="stories.html">
                        <div class="w_link_logo">
                            <span class="material-symbols-outlined">
                                book
                            </span>
                        </div>
                        <div class="w_link">
                            <h3>
                                Stories
                            </h3>
                            <h5>My story in Yah-Den Mainland!</h5>
                        </div>
                    </a>
                    <a href="#" class="link_disabled">
                        <div class="w_link_logo">
                            <span class="material-symbols-outlined">
                                gallery_thumbnail
                            </span>
                        </div>
                        <div class="w_link">
                            <h3>
                                Gallery
                            </h3>
                            <h5>My memory in Yah-Den Mainland!</h5>
                        </div>
                    </a>
                    <a href="#" class="link_disabled">
                        <div class="w_link_logo">
                            <span class="material-symbols-outlined">
                                toys_and_games
                            </span>
                        </div>
                        <div class="w_link">
                            <h3>
                                Playground
                            </h3>
                            <h5>Interesting things I've made!</h5>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!--
            <div class="contrast_switch">
            <div class="contrast_logo"><span class="material-symbols-outlined">
                    flashlight_off
                </span></div>
            <span>High contrast mode<br>(If unable to see clearly)</span>
        </div>
        -->

    </div>
    <!--Footer, handled by pure Javascript.-->
    <footer id="footer">
    </footer>
</body>
<script>
    const mark = "index";
</script>
<script src="node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="module" src="script/index.js"></script>

</html>